<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-03-27 11:26:59
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2025-09-24 17:46:13
 * @FilePath: /vue3-admin/src/views/system/UsersManage/components/EditView/EditView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import CustomCard from '@/components/ui/CustomCard/CustomCard.vue';
import { ref, toRefs } from 'vue';
import CustomDialog from '@/components/ui/CustomDialog/CustomDialog.vue';
import { useForm } from './useForm';
import type { FormInstance } from 'element-plus';
import { useEnum } from '@/service/useEnum/index';

const props = defineProps<{
    modelValue: boolean;
    id?: number; // 用number | undefined vue3会错误的给出类型检测错误
}>();

const emits = defineEmits<{
    (event: 'update:model-value', value: boolean): void;
    (event: 'afterSubmit'): void;
}>();

const { modelValue, id } = toRefs(props);

const formRef = ref<FormInstance>();
const {
    rules,
    dialogTitle,
    detailLoading,
    updateLoading,
    formModel,
    handleEdit,
    handleSubmit
} = useForm(formRef, id, modelValue, () => emits('afterSubmit'));

const { getRoleTypes, getDeptTreeTypes } = useEnum();
const { refData: roleTypes } = getRoleTypes();
const { refData: deptTreeTypes } = getDeptTreeTypes();

const deptCascaderProps = {
    emitPath: false,
    checkStrictly: true,
    multiple: true
};
</script>

<template>
    <CustomDialog
        :title="dialogTitle"
        :model-value="modelValue"
        @update:model-value="(val) => emits('update:model-value', val)"
    >
        <CustomCard title="" :canCollapse="false">
            <el-form
                ref="formRef"
                :rules="rules"
                :model="formModel"
                v-loading="detailLoading"
            >
                <el-row>
                    <el-form-item
                        label="用户名"
                        prop="username"
                        label-width="80px"
                    >
                        <el-input v-model="formModel.username" />
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="头像" prop="avatar" label-width="80px">
                        <PicsUpload
                            :tokens="[formModel.avatar?.token]"
                            :limit="1"
                            @success="
                                (res) => {
                                    formModel.avatar = {
                                        token: res[0].data.token,
                                        id: res[0].data.id
                                    };
                                }
                            "
                        />
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item
                        label="是否有效"
                        prop="valid"
                        label-width="80px"
                    >
                        <el-switch v-model="formModel.valid" />
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item
                            label="角色"
                            prop="roleIds"
                            label-width="80px"
                        >
                            <el-select
                                v-model="formModel.roleIds"
                                multiple
                                clearable
                            >
                                <el-option
                                    v-for="(item, index) in roleTypes"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item
                            label="部门"
                            prop="deptIds"
                            label-width="80px"
                        >
                            <el-cascader
                                v-model="formModel.deptIds"
                                :options="deptTreeTypes"
                                :props="deptCascaderProps"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item
                            label="备注"
                            prop="remark"
                            label-width="80px"
                        >
                            <el-input
                                v-model="formModel.remark"
                                type="textarea"
                                :autosize="{ minRows: 4, maxRows: 6 }"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="flex-row jc-center">
                    <el-button
                        type="primary"
                        @click.stop="handleSubmit"
                        :loading="updateLoading"
                        >提交</el-button
                    >
                    <el-button @click.stop="() => handleEdit(id)"
                        >重置</el-button
                    >
                </el-row>
            </el-form>
        </CustomCard>
    </CustomDialog>
</template>

<!-- <style lang="scss" scoped>
.editview-container {
    height: 100%;
}
</style> -->
